<template>
  <div>
    <!-- header start -->
    <!--    <IndexTop />-->
    <!--    <IndexNav />-->
    <!--    <IndexMenu />-->
    <!-- end  -->
    <index-banner />
    <!-- end banner -->
    <div class="zscf_con_wper pb30">
      <div class="zscf_con px1200">
        <!--        <index-latest-info :notice="notice" />-->
        <category-picture />
        <selected-items :advise="advise" />
        <projects :projects="projects" />
        <!-- end block1 -->
        <index-news :develop="develop" />
        <!-- end block5 -->
        <!--        <index-partner />-->
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import API from '../api'
import SelectedItems from '~/components/index/SelectedItems'
import Projects from '~/components/index/Projects'
import CategoryPicture from '~/components/category/CategoryPicture'
import IndexNews from '~/components/index/IndexNews'
import IndexBanner from '~/components/index/IndexBanner'
export default {
  name: 'Index',
  components: {
    CategoryPicture,
    SelectedItems,
    Projects,
    IndexNews,
    IndexBanner
  },
  async asyncData ({ store }) {
    store.commit('setMenuState', 'index')
    await store.dispatch('setCategories')
    await store.dispatch('setSlides')
    const res = await Promise.all([
      API.getNoticePage(),
      API.getItemHot(),
      API.getDevelopmentList(),
      API.getItemPage({ page: 1, size: 5 })
    ])

    // 公告
    const notice = res[0].data.data
    // 项目精选
    const advise = { items: res[1].data.items, count: res[1].data.total }
    //
    const develop = res[2].data
    const projects = res[3].data.items
    return {
      develop, projects, notice, advise
    }
  },
  computed: {
    ...mapState(['counter', 'categories'])
  }
}
</script>

<style>
@import "static/style/style.css";
</style>
